/*
 * @Description: 表格上方功能
 * @Author: Zzt
 * @Date: 2022-08-09 14:59:01
 * @LastEditTime: 2022-08-11 16:29:22
 */

import { Button, Divider, Space } from 'antd';
import cs from 'classnames';
import AddPlan from './dialogs/AddPlan';
import { useAppraisalAndDispositionContext } from '../contexts/AppraisalAndDispositionContext';
import { useMemo, useState } from 'react';

const PageOperate = (props: any) => {
  const { deleteAppraisalPlan, delId } = useAppraisalAndDispositionContext();
  const { classname } = props;
  const [isModalVisible, setIsModalVisible] = useState(false);

  const data = { planTitle: '请填写计划标题', status: '0' };
  const showModal = () => {
    setIsModalVisible(true);
  };
  const closeAddPlan = () => {
    setIsModalVisible(false);
  };
  return (
    <div className={cs('filter-container', 'page-operate', classname)}>
      <p>鉴定与处置计划列表</p>
      <Space size="small">
        <Button onClick={showModal}>添加计划</Button>
        {useMemo(
          () => (
            <AddPlan
              visible={isModalVisible}
              data={data}
              onClose={() => {
                closeAddPlan();
              }}
            />
          ),
          [isModalVisible]
        )}
        <Button
          onClick={() => {
            deleteAppraisalPlan(delId, '是否删除选中的计划');
          }}
        >
          删除计划
        </Button>
        <Divider type="vertical" />
        <Button>筛选</Button>
      </Space>
    </div>
  );
};

export default PageOperate;
